<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>易果首页</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1432742_yzad760uvw.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/fenlei.css">
    <script src="../js/axios.min.js"></script>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/分类.js"></script>
    <style>
           footer a:nth-of-type(4) {
            position: relative;
        }
        footer a:nth-of-type(4) #num {
            width: .26rem;
            height: .26rem;
            background-color: #fc3d3d;
            color: #fff;
            position: absolute;
            border-radius: 50%;
            top: -.06rem;
            right: .48rem;
            text-align: center;
            line-height: .26rem;
        }

        
    </style>
</head>
<body>
    <header>
        <div class="search">
            <input type="text" placeholder="请输入商品名称" onfocus="sear()"  oninput="search()" id="keywords">
        </div>
    </header>
    <div id="mask-w">
    <div id="mask">
        <ul id="searchList">
        </ul>
    </div>
    <main>
        <ul id="nav">
            <li>热门推荐</li>
            <li>进口水果</li>
            <li>国产水果</li>
            <li>精选肉类</li>
            <li>海鲜水产</li>
            <li>禽类蛋白</li>
            <li>乳品糕点</li>
            <li>新鲜蔬菜</li>
            <li>油粮杂货</li>
            <li>方便素食</li>
        </ul>
        <ul id="option">
            
                     <!-- <li><img src="../image/fenlei-1.png" alt=""><p>芒果</p></li>
                     <li><img src="../image/fenlei-2.png" alt=""><p>奇异果</p></li>
                     <li><img src="../image/fenlei-3.png" alt=""><p>车厘子</p></li>
                     <li><img src="../image/fenlei-4.png" alt=""><p>草莓</p></li> -->
              
        </ul>
    </main>
    <footer>
        <a href="../首页.html">
            <img src="../image/shouye01.png" alt="">
            <span>首页</span>
        </a>
        <a href="">
            <img src="../image/fenlei02.png" alt="">
            <span>分类</span>
        </a>
        <a href="./吃饭吧.html">
            <img src="../image/chifanba01.png" alt="">
            <span>吃饭吧</span>
        </a>
        <a href="./购物车.html">
            <img src="../image/gouwuche01.png" alt="">
            <span>购物车</span>
            <div id="num"></div>
        </a>
        <a href="./我的易果.html">
            <img src="../image/wodeyiguo01.png" alt="">
            <span>我的易果</span>
        </a>
    </footer>
    </div>
    <script src="../js/rem.js"></script>

    </script>
    <script>
        //侧边栏点击效果
        let listUl = document.querySelector("#nav");
        console.log(listUl);
        let listLi = listUl.querySelectorAll("li");
        listLi[0].style.backgroundColor ="#fff";
        listLi[0].style.borderLeft =".1rem solid #1cb97e";

        let cbl=function(){
                listLi.forEach((v)=>{
                    v.style.backgroundColor="#f4f4f4";
                    v.style.borderLeft ="none";
                })
                this.style.backgroundColor ="#fff";
                this.style.borderLeft =".1rem solid #1cb97e";
            }

         listLi.forEach((v)=>{
            v.addEventListener("click",cbl);
         })
        //实现文本框获取焦点后 变暗处理
        let mask = document.querySelector("#mask");
        let sear = function(){
            mask.style.display = "block";
            
        }
        //实现点击外面变暗处理消失
        mask.onclick = function(){
            mask.style.display = "none"
        }

    </script>
    <script>
        // 实现选项卡功能
        let option = document.querySelector("#option");
        let optionLi = option.querySelectorAll("li ul");
        listLi.forEach(v=>{
            // console.log(v);
            let index = [...listLi].indexOf(v,0); //使用扩展运算符 将类数组转换成数组 此外还有 

            let xxk = function(){
                optionLi.forEach(v=>{
                    v.style.opacity = 0;
                    optionLi[index].style.opacity = 1;
                })
            }
            v.addEventListener("click",xxk);
        })
        //点击商品进入详情页
        let goodsLi = document.querySelectorAll("#option li ul li");
        goodsLi.forEach((v)=>{
            v.onclick = function(){
                location.href = "搜索结果页.html"
            }
        })
    </script>
    <script>
        // 搜索显示对应的搜索结果
        let search = function(){
            let keywords = document.querySelector("#keywords");
            axios.get(goods_query_Api,{
                params:{
                    name:keywords.value
                }
            }).then(res=>{
                console.log(res.data);
                let list = document.querySelector("#searchList");
                console.log(list);
                var html = res.data.map(v=>
                    `
                    <li class="mask_li" data_id="${v.id}">${v.name}</li>
                     `
                ).join("");
                console.log(html);
                list.innerHTML = html;
                // 点击搜索结果跳转页面
                let mask_li = document.querySelectorAll(".mask_li");
                console.log(mask_li)
                mask_li = [...mask_li];
                console.log(mask_li)
                mask_li.forEach(v=>{
                    console.log(v)
                    v.addEventListener("click",function(){
                            let gid = v.getAttribute("data_id")
                            location.href = "首页分页/active01.html?id=gid" 
                        })
                })

            })
        }

    </script>

        

</body>
</html>